<script>
export default {
  name: 'institutionsArea',
  data() {
    return {
      /*加载效果*/
      loading: true,
      /*机构列表tree数组*/
      treeList: [],
      /*当前机构的ID*/
      currentTreeId: '',
      /*机构详情*/
      institutionDetail: {},
      /*定位位置信息*/
      center: '',
      // 位置信息(省市区的精度和纬度)
      polygonPath: [],
      /* 是否显示机构作业范围 */
      showScope: false,
      /* 机构业务范围参数 */
      scopeParams: {
        bid: '',
        created: null,
        latitude: '',
        longitude: '',
        polygon: [],
        type: 1,
        updated: null
      },
      keyword: ''
    }
  },
  methods: {
    /*
    * 获取树状机构信息的回调函数
    *  */
    async fetchInstitutionTree() {
      try {
        this.loading = true
        const treeList = await this.$store.dispatch('organizationStore/fetchInstitutionTreeAction')
        this.treeList = treeList
        this.currentTreeId = treeList[0].id
        await this.fetchInstitutionDetail()
        const { lat, lng } = this.institutionDetail.province
        this.center = { lat, lng }
        this.$nextTick(async() => {
          this.$refs.treeRef.setCurrentKey(this.currentTreeId)
          // const scope=await this.fetchBusinessScope(Number(this.currentTreeId), 1)
        })
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },
    /*
    * 获取机构详情的回调函数
    *  */
    async fetchInstitutionDetail() {
      try {
        const institutionDetail = await this.$store.dispatch('organizationStore/fetchInstitutionDetailAction', this.currentTreeId)
        this.institutionDetail = institutionDetail
        const provinceInfo = institutionDetail.province
        const cityInfo = institutionDetail.city
        const countyInfo = institutionDetail.county
        this.polygonPath = []
        this.polygonPath.push({ lat: provinceInfo.lat, lng: provinceInfo.lng })
        this.polygonPath.push({ lat: cityInfo.lat, lng: cityInfo.lng })
        this.polygonPath.push({ lat: countyInfo.lat, lng: countyInfo.lng })
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    /*
    *节点被点击时的回调
    *  */
    async nodeClick(node) {
      this.currentTreeId = node.id
      await this.fetchInstitutionDetail()
      const { province } = await this.$store.dispatch('organizationStore/fetchInstitutionDetailAction', this.currentTreeId)
      const { lat, lng } = province
      this.center = { lat, lng }
      this.scopeParams.longitude = Number(lng)
      this.scopeParams.latitude = Number(lat)
      this.scopeParams.bid = Number(node.id)
      // const scope=await this.fetchBusinessScope(Number(node.id), 1)

    },
    /*
    * 获取业务范围的回调函数
    *  */
    async fetchBusinessScope(id, type) {
      try {
        this.scopeParams = await this.$store.dispatch('institutionsAreaStore/fetchBusinessScopeAction', { id, type })
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    *
    * 点击绘制机构作业范围的回调函数
    *  */
    handleEditScope() {
      this.showScope = this.showScope ? false : true
    },
    /*
    *
    * 点击保存机构作业范围的回调函数
    *  */
    async handleSubmitScope() {
      if (!this.showScope) return this.$message.warning('请绘制机构作业范围')
      try {
        this.scopeParams.longitude = Number(this.institutionDetail.longitude)
        this.scopeParams.latitude = Number(this.institutionDetail.latitude)
        this.scopeParams.bid = Number(this.currentTreeId)
        this.scopeParams.polygon = this.polygonPath.map(item => ({ latitude: Number(item.lat), longitude: Number(item.lng) }))
        this.scopeParams.polygon.push({ latitude: Number(this.polygonPath[0].lat), longitude: Number(this.polygonPath[0].lng) })
        const addScopeResult = await this.$store.dispatch('institutionsAreaStore/addScopeAction', this.scopeParams)
        this.showScope = false
        this.$message.success(addScopeResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath()
    },
    addPolygonPoint() {

    }
  },
  mounted() {
    this.fetchInstitutionTree()
  }
}
</script>

<template>
  <div class="institutions-area">
    <div class="left" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255)">
      <el-card shadow="never" class="card-tree">
        <el-scrollbar class="scroll-bar">
          <el-tree class="filter-tree customer-tree-box" icon-class="el-icon-folder-opened" highlight-current ref="treeRef" node-key="id" :data="treeList" default-expand-all @node-click="nodeClick">
            <template #default="{node,data}">
              <span>{{ data.name }}</span>
            </template>
          </el-tree>
        </el-scrollbar>
      </el-card>
    </div>
    <div class="right">
      <el-card shadow="never" class="card-map">
        <div class="header">
          <el-input placeholder="请输入地区关键字" v-model="keyword"></el-input>
          <el-button type="primary" icon="el-icon-search">搜索机构所属地区</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="handleEditScope">绘制机构作业范围</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="handleSubmitScope">保存机构作业范围</el-button>
        </div>
        <baidu-map class="map-view" :zoom="13" :center="center" inertial-dragging :scroll-wheel-zoom="true">
          <bm-panorama anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-panorama>
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
          <bm-polygon v-if="showScope" :path="polygonPath" stroke-color="#e15536" :stroke-opacity="1" :stroke-weight="5" :editing="true" @lineupdate="updatePolygonPath"/>
          <bm-local-search :panel="false" :keyword="keyword" :auto-viewport="true"></bm-local-search>
        </baidu-map>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.institutions-area {
  display: flex;
  padding: 20px;

  .left {
    width: 220px;
    height: 850px;

    .scroll-bar {
      height: 850px;
    }

  }

  .right {
    flex: 1;
    height: 890px;
    margin-left: 10px;

    .card-map {
      width: 100%;
      height: 890px;
      padding: 10px;

      .header {
        margin-bottom: 10px;
        display: flex;

        .el-input {
          width: 280px;
        }

        .el-button {
          margin-left: 20px;
        }
      }

      .map-view {
        width: 100%;
        height: 800px;
      }
    }
  }


}
</style>
